<template>
  <div>
    <top></top>

    <!-- <div class="Back">
      <a
        class="BackLink"
        th:if="${category}!=null"
        th:href="@{/categoryForm(categoryId=${category.categoryId})}"
      >
        <i class="fa-solid fa-circle-left"></i>
        Return to
        <span th:text="${category.name}"></span>
      </a>

      <a class="BackLink" th:if="${category}==null" th:href="mainForm">
        <i class="fa-solid fa-circle-left"></i>
        Return to Main Menu
      </a>
    </div> -->

    <div style="display: inline-block" class="Catalog">
      <h2>{{ type }}</h2>

      <div class="ProductMain">
        <div v-if="itemList.length > 0">
          <div class="Product" v-for="item in itemList">
            <div class="ProductImg">
              <a @click="goRouterPath(`/item/${item.itemId}`)">
                <img
                  src="../../assets/images/example.png"
                  class="CategoryImgLink"
                />
              </a>
            </div>
            <div class="ProductDescription">
              <b>
                <a class="ProductDescriptionLink">
                  <div>{{ item.attribute1 }}</div>
                  <div>{{ item.attribute2 }}</div>
                  <div>{{ item.attribute3 }}</div>
                  <div>{{ item.attribute4 }}</div>
                  <div>{{ item.attribute5 }}</div>
                  <div>{{ item.quantity }}</div>
                </a>
              </b>
            </div>
            <div class="ProductPrice">
              <b>
                <a class="ProductPriceLink">{{ item.listPrice }} </a>
              </b>
            </div>
            <div class="Button">
              <a class="ButtonLink">
                <i class="fa-solid fa-cart-shopping"></i>Add to Cart
              </a>
            </div>
          </div>
        </div>
        <h2 v-else>Sorry for that nothing was found here...</h2>
      </div>
    </div>

    <bottom></bottom>
  </div>
</template>

<script>
import Bottom from "../common/Bottom.vue";
import Top from "../common/Top.vue";
export default {
  components: {
    Bottom,
    Top,
  },
  data() {
    return {
      type: null,
      itemList: [],
    };
  },
  methods: {
    getItemsByProduct(productId) {
      this.$http
        .get(`/products/${productId}/items`)
        .then((res) => {
          console.log(res);
          this.itemList = res.data.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    goRouter(name) {
      this.$router.push({ name: name });
    },
    goRouterPath(path) {
      console.log("goRouterPath " + path);
      this.$router.push({ path: path });
    },
  },
  mounted() {
    console.log(this.$route.params.type);
    this.type = this.$route.params.type;
    this.getItemsByProduct(this.type);
  },
};
</script>

<style scoped>
@import url(../../assets/css/mypetstoreNew.css);
</style>
